<template>
    <ul class="materDown clearfix" v-show="modeMater" :style="editStyle">
        <li v-for="item in indexMsg.cats[modeKey][modeKey]" :key="item.id">
            <router-link :to="{path:goUrl,query:{type:type,catid1:item.id,catid2:0,style:0,id:0,keys:0,sort:0,vip:0,page:0}}">{{item.catname}}</router-link>
        </li>
    </ul>
</template>
<script>
export default {
    name:"miniDrop",
    props:["modeMater","editStyle","modeKey","indexMsg","goUrl","type"]
}
</script>
<style>
    
    .materDown{
    position: absolute;
    /* bottom: -50px; */
    left: -500px;
    width: 756px;
    /* height: 50px; */
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.08);
    padding: 5px 0;
    z-index:99;
}
.materDown li{
    float: left;
    font-size: 12px;
    line-height: 30px;
    margin-left: 36px; 
    color: #7d7d7d;
}
/* .materDown li:hover{
    background: #e4615c;
    color: #fff;
} */
.materDown li a{
    display:inline-block;
    padding: 0 10px;
    width: 100%;
    height: 100%;
    border-radius: 3px;
}
/* .materDown li a:hover{
    background: #e4615c;
    color: #fff;
} */
.materDown li:hover a{
        background: #e4615c;
        color: #fff;
        line-height: 20px;
    }
</style>
